<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
	export default {
    name: 'BarLineChartScroll',
    props: ['data'],
	  data() {
      return {
      }
    },
    mounted() {
      this.drawChart()
    },
    watch: {
      'data.dataX': function(val) {
        this.drawChart()
      },
      deep: true
    },
    methods: {
      drawChart() {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = this.$echarts.init(this.$el)
        // 绘制图表
        let xAxisData = this.data.dataX
        let series = []
        series = this.data.data.map((item, index) => {
          if (item.type == 'bar') {
            return {
              name: item.name,
              type: 'bar',
              barCategoryGap: '20%',
              barMaxWidth: 8,
              barGap: 0,
              stack: this.data.stack,
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: item.color[0]
                }, {
                  offset: 1,
                  color: item.color[1]
                }]),
                barBorderRadius: this.data.round,
              },
              data: item.values,
            }
          } else if (item.type == 'line') {
            var lineObj = {
              name: item.name,
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 4,
              yAxisIndex: this.data.ys ? 1 : 0,
              lineStyle:{
                color: item.color
              },
              itemStyle:{
                color: item.color
              },
              data: item.values,
            }
          }
          if (item.markLine && item.markLine.show) {
            return Object.assign({}, lineObj, {
              markLine: {
                silent: true,
                symbol: 'none',
                label: {
                  show: true,
                  position: 'end',
                },
                data: [{
                  yAxis: item.markLine.value
                }]
              }
            })
          } else {
            return lineObj
          }
        })
        let yAxis = []
        if (this.data.ys) {
          yAxis = [
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#e7e7e7',
                  width: 1,
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#999',
                }
              },
              splitLine:{
                show:true,
                lineStyle:{
                  type:'dashed',
                  color: '#e7e7e7',
                },
              },
            },
            {
              type: 'value',
              splitLine:{
                show: false,
              },
              axisLine: {
                lineStyle: {
                  color: '#e7e7e7',
                  width: 1,
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#999',
                }
              },
            }
          ]
        } else {
          yAxis = [
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#e7e7e7',
                  width: 1,
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#999',
                }
              },
              splitLine:{
                show:true,
                lineStyle:{
                  type:'dashed',
                  color: '#e7e7e7',
                },
              },
            },
          ]
        }
        let options = {
          grid: {
            left: '0',
            right: '10px',
            top:'15px',
            bottom: this.data.bottom,
            containLabel: true
          },
          legend: {
            show: this.data.legendShow == false ? false : true,
            bottom: 0,
            itemWidth: 10,
            itemHeight: 10,
            data: this.data.data.map((item, index) => {
              if (item.type == 'bar') {
                return {
                  name: item.name,
                  icon: 'roundRect',
                }
              } else if (item.type == 'line') {
                return {
                  name: item.name,
                  icon: 'line',
                }
              }
            }),
            formatter: (name) => {
              return name + '(' + this.data.data.find(item => item.name == name).unit + ')'
            }
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            extraCssText: 'z-index: 2',
            position: function(point, params, dom, rect, size) {
              dom.style.transform = "translateZ(0)"
            },
            confine: true,
          },
          xAxis: [{
            type: 'category',
            boundaryGap: true,
            data: xAxisData,
            axisLabel: {
              interval: this.data.labelXTextStyle == 'normal' ? 'auto' : 0,
              show: true,
              formatter: value => {
                if(this.data.labelXTextStyle == 'normal') {
                  return value
                } else {
                  return value.split("").join("\n");
                }
              },
              textStyle: {
                fontSize: 12,
                color: '#A3A3A3',
              },
            },
            axisLine: {
              lineStyle: {
                color: '#e7dfd4',
                width: 1,
              }
            },
            axisTick: {
              show: false
            },
          }],
          yAxis: yAxis,
          series: series
        }
        if (this.data.scroll != false) {
          let end = 50
          let start = 0
          if (this.data.spacing !== undefined) {
            end = this.data.spacing
          }
          if (this.data.start !== undefined) {
            end = this.data.start
          }
          Object.assign(options, {
            dataZoom: [
              {
                type: "inside",
                show: true,
                start,
                end,
              }
            ],
          })
        }
        this.myChart.setOption(options, true);
        this.myChart.resize()
        window.addEventListener('resize', () => {
          this.myChart.resize()
        });
      }
    },
  }
</script>

<style lang="scss" scoped>
  .chart {
    width: 100%;
    height: 100%;
  }
</style>
